<template>
  <el-form :rules="rules" ref="condition" :model="condition">
    <el-form-item prop="mail" v-if="type==='mail'">
      <el-input v-model="condition.mail" placeholder="请输入新邮箱"></el-input>
    </el-form-item>
    <el-form-item prop="phone" v-else>
      <el-input v-model.trim="condition.phone" placeholder="请输入新手机号"></el-input>
    </el-form-item>
    <!-- <el-form-item prop="captchaCode">
      <el-input class="captchaCode" v-model="condition.captchaCode" placeholder="图片验证码"></el-input>
      <img :src="condition.img" alt @click="change_img" />
    </el-form-item>
    <el-form-item prop="smsCode" class="btn_inner">
      <el-input v-model="condition.smsCode" placeholder="短信验证码">
        <el-button slot="append" @click="()=>{post_msg(condition)}" :class="{'disabled':condition.countDown}">
          发送验证码
          <span v-show="condition.countDown">({{condition.countDown}})</span>
        </el-button>
      </el-input>
    </el-form-item> -->
    <el-form-item class="saveBtn">
      <el-button type="primary" @click="()=>{phoneOrMail(condition)}">保存</el-button>
      <el-button type="primary" plain @click="cancel">取消</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import { mailValidate, updateMail, updatePhone, phoneValidate } from '../../../api/account';
import { postMsg, captchaImg, mailCode } from '../../../api/index';
export default {
  name: '',
  data () {
    // 检测图片验证码
    var checkImage = (rule, value, callback) => {
      console.log('图片');
      if (value.length > 3) {
        captchaImg({ code: this.condition.captchaCode, uuid: this.condition.captchaUUid }).then(data => {
          if (data.data) {
            this.condition.checkImage = true;
            callback();
          } else {
            callback(new Error('请输入正确验证码'));
          }
        });
      } else {
        callback();
      }
    };
    var checkPhone = (rule, value, callback) => {
      phoneValidate({ phone: value }).then(data => {
        console.log(data);
        if (data.success) {
          callback();
        } else {
          callback(new Error(`${data.msg}`));
        }
      });
    };
    var checkMail = (rule, value, callback) => {
      mailValidate({ mail: value }).then(data => {
        console.log(data);
        if (data.success) {
          callback();
        } else {
          callback(new Error(`${data.msg}`));
        }
      });
    };
    return {
      condition: {
        clickTime: 0,
        countDown: '',
        checkImage: false,
        phone: '',
        mail: '',
        img: '',
        smsCode: '',
        captchaUUid: '',
        captchaCode: '',
        mailValid: false
      },
      rules: {
        // captchaCode: [{ required: true, message: '请输入图片验证码', trigger: 'blur' }, { validator: checkImage }],
        // smsCode: [{ required: true, message: '请输入验证码', trigger: 'blur' }],
        phone: [
          { required: true, message: '请输入新手机号', trigger: 'blur' },
          { pattern: /^1[3456789]\d{9}$/, message: '请输入正确的手机号码', trigger: 'change' },
          { validator: checkPhone, trigger: 'change' }
        ],
        mail: [
          { required: true, message: '请输入新邮箱', trigger: 'blur' },
          {
            pattern: /^([A-Za-z0-9]+([_\.][A-Za-z0-9]+)*@([A-Za-z0-9\-]+\.)+[A-Za-z]{2,6})$/,
            message: '请输入正确的邮箱账号',
            trigger: 'change'
          },
          { validator: checkMail, trigger: 'change' }

        ]
      }
    };
  },
  mounted () {
    this.change_img();
  },
  props: ['type'],
  methods: {
    // 取消修改
    cancel () {
      this.$emit('changeIsset');
    },
    // 保存
    save (account) {
      let query = {
        captchaCode: this.condition.captchaCode,
        captchaUUid: this.condition.captchaUUid,
        code: this.condition.smsCode
      };
      (this.type === 'phone' ? updatePhone({ ...query, phone: account }) : updateMail({ ...query, mail: account })).then(data => {
        if (data.success) {
          this.$message.success('修改成功');
          this.$emit('changeIsset');
        } else {
          this.$message.error(`${data.msg}`);
        }
      });
    },
    // 区分修改类型
    phoneOrMail (option) {
      this.$refs.condition.validate(valid => {
        if (valid) {
          if (this.type === 'phone') {
            this.save(option.phone);
          } else {
            this.save(option.mail);
          }
        } else {
          // this.$message.error('请输入账号和密码');
          console.log('error submit!!');
          return false;
        }
      });
    },
    // 发送短信
    post_msg (option) {
      if (this.type === 'phone') {
        if (option.phone) {
          this.postMessage(option.phone);
        } else {
          this.$message.error('请输入手机号');
        }
      } else {
        if (option.mail) {
          this.postMessage(option.mail);
        } else {
          this.$message.error('请输入邮箱');
        }
      }
    },
    // 发送邮箱验证码
    postMessage (account) {
      if (this.condition.checkImage) {
        if (this.condition.countDown) {
          return;
        }
        let query = {
          uuid: this.condition.captchaUUid,
          code: this.condition.captchaCode,
        };
        if (this.type === 'phone') {
          query = { ...query, phone: account, type: 4 }
        } else {
          query = { ...query, mail: account, type: 5 }
        }
        (this.type === 'phone' ? postMsg(query) : mailCode(query)).then(data => {
          if (data.success) {
            let previous = this.condition.clickTime;
            let now = new Date();
            if (now - previous > 60000) {
              console.log(1);
              this.condition.clickTime = new Date();
              this.condition.countDown = 60;
              this.condition.timerMin = setInterval(() => {
                this.condition.countDown -= 1;
              }, 1000);
              this.condition.timer = setTimeout(() => {
                this.condition.countDown = '';
                clearInterval(this.condition.timerMin);
                clearTimeout(this.condition.timer);
              }, 60000);
            }
          } else {
            this.condition.checkImage = false;
            this.$message.error(`${data.msg}`);
          }
        });
      } else {
        this.$message.error('请正确输入图片验证码');
      }
    },
  }
};
</script>

<style lang="css" scoped>
.el-form {
    margin-top: 16px;
    position: relative;
    margin-bottom: 26px;
}
.el-form-item {
    width: 274px;
}
.el-form-item /deep/ .el-input__inner {
    width: 274px;
    height: 40px;
    background: rgba(255, 255, 255, 1);
    border: 1px solid rgba(232, 232, 232, 1);
    opacity: 1;
    line-height: 40px;
    padding-left: 24px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
}
.el-form .el-form-item /deep/ .el-form-item__error {
    left: 286px;
    top: 13px;
    width: 130px;
}
.el-form-item .el-form-item__content img {
    width: 98px;
    height: 40px;
    background: rgba(239, 239, 239, 1);
    cursor: pointer;
    opacity: 1;
}
.el-form-item .captchaCode {
    vertical-align: top;
    margin-right: 15px;
    display: inline-block;
    width: 156px;
}
.el-form-item .captchaCode /deep/ .el-input__inner {
    width: 156px;
    text-transform: uppercase;
}
.saveBtn {
    position: absolute;
    top: 8px;
    right: 93px;
    width: 250px;
    height: 24px;
}
.saveBtn /deep/ .el-form-item__content {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.saveBtn .el-button {
    line-height: 0;
    width: 94px;
    height: 24px;
    opacity: 1;
    margin: 0;
}
.btn_inner /deep/ .el-input__inner {
    width: 100%;
}
</style>